<template>
  <div style="height: 100%; overflow: hidden" v-if="listData.length>0">
    <p
      class="title"
      :style="{
        marginLeft: formatPx(20) + 'px',
        marginRight: formatPx(20) + 'px',
        marginTop: formatPx(10) + 'px',
        marginBottom: formatPx(10) + 'px',
      }"
    >
      <span :style="styleObj">点名</span>
      <span :style="styleObj">描述</span>
      <span :style="styleObj">更新时间</span>
      <span :style="styleObj">最后值</span>
    </p>
    <div class="page-example3" :style="{ height: scollHeight + 'px' }">
      <vue-seamless-scroll
        :data="listData"
        :class-option="defaultOption"
        v-if="listData.length > 0"
      >
        <ul
          class="ul-scoll"
          :style="{
            paddingLeft: formatPx(20) + 'px',
            paddingRight: formatPx(20) + 'px',
          }"
        >
          <li
            v-for="(item, index) in listData"
            :key="index"
          >
            <span class="pointName" :style="styleObj">{{
                item.point
              }}</span>
            <span class="dataValue" :style="styleObj">{{
                item.desc
              }}</span>
            <span class="dataTime" :style="styleObj">{{ item.time }}</span>
            <span class="dataValue" :style="styleObj">{{
                item.value
              }}</span>


          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
  <div v-else class="fertes">数据加载中......</div>
</template>

<script>
import { queryAll, queryPrList } from '@/api/collection/board'
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: 'Example3',
  components: {
    vueSeamlessScroll
  },
  data() {
    // 这里存放数据
    return {
      listData: [],
      timer: null
    }
  },
  // 方法集合
  methods: {},
  // 监控data中的数据变化
  watch: {},
  computed: {
    scollHeight() {
      //默认初始值300
      let h = this.formatPx(280)
      //监测父容器高度
      return h
    },
    defaultOption() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    styleObj() {
      return {
        fontSize: this.formatPx(16) + 'px'
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.yaliBtn()
    this.sajrfl()

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.timer = setInterval(() => {
      this.sajrfl()
    }, 25000)
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },

  methods: {
    sajrfl() {
      queryAll().then((response) => {
        let Array = []
        for (let index = 0; index < response.length; index++) {
          const element = response[index]
          let obj = {}
          obj.point = element.point.substring(0, 14) + '...'
          obj.desc = element.desc.substring(0, 5) + '...'
          obj.time = element.time.substring(10, 20)

          let aa = element.value.toFixed(2)
          obj.value = parseFloat(aa)

          Array.push(obj)

        }
        this.listData = Array
      })
    },
    yaliBtn() {
      queryPrList().then((response) => {
        let Array = []
        for (let index = 0; index < response.length; index++) {
          const element = response[index]
          let obj = {}
          obj.point = element.point.substring(0, 14) + '...'
          obj.desc = element.desc.substring(0, 5) + '...'
          obj.time = element.time.substring(10, 20)

          let aa = element.value.toFixed(2)
          obj.value = parseFloat(aa)

          Array.push(obj)

        }
        this.listData = Array
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page-example3 {
  height: 200px;
  overflow: hidden;

  ul.ul-scoll {
    list-style: none;

    > li {
      padding: 5px 0;
      align-items: center;
      border-top: 1px solid rgba(255, 255, 255, 0.1);

      > span {
        padding: 0 3px;
        word-wrap: break-word;
        word-break: break-all;
        color: #59C6FF;
      }
    }
  }
}

p.title {
  //   background-color: #eee;
  box-sizing: border-box !important;

  > span {
    padding: 0 3px;
    line-height: 1.5;
  }
}

p.title,
ul.ul-scoll > li {
  display: flex;

  > span {
    flex: 1;

    &:first-child {
      flex: 2.2;
    }

    &:nth-child(2) {
      flex: 1.2;
    }

    // text-align: center;
  }

  > div {
    flex: 1;
    text-align: center;
  }
}

.fertes {
  height: 200px;
  line-height: 200px;
  text-align: center;
}
</style>
